<template>
  <view class="order">
	<top-back-navbar position="fixed" :title="title" background="#ffffff" color="#000000"></top-back-navbar>
    <view class="container">
      <view class="u-f-ajc u-f-column title_box"
        v-if="!['record_sf', 'my_credit', 'buy_cd', 'rengou', 'can_buy'].includes(type) && list.length">
        <view class="zhuti-color" style="margin-bottom: 30rpx;">{{total}}</view>
        <view>{{contant}}</view>
      </view>
      <view class="list_box">
        <view v-if="list.length" style="background-color: #FFFFFF;">
          <view class="items2 u-f-ac u-f-jsb">
            <view>备注</view>
            <view>时间</view>
            <view>数量</view>
          </view>
          <view class="items u-f-ac u-f-jsb" v-for="(item, index) in list" :key="index">
            <view>{{item.remark}}</view>
            <view>{{item.createtime}}</view>
            <view class="zhuti-color">{{item.num}}</view>
          </view>
        </view>

        <view class="flex flex-direction align-center" v-else>
          <!-- <image style="width: 40px;height: 40px;margin-top: 80px;margin-bottom: 10px;" src="../../static/i5.png"
            mode="aspectFill"></image> -->
          <text style="font-size: 30rpx;margin: 200rpx 0;">暂无数据</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '',
        list: [],
        page: 1,
        type: 'takeGoods',
        contant: '我的提货券',
        total: 0,
		openid:''
      };
    },
    onLoad(e) {
      if (e.type) this.type = e.type
      var title;
      switch (this.type) {
        case 'credit2':
          title = '可用额度明细'
          this.contant = '可用额度'
          break;
        case 'equity':
          title = '权益券明细'
          this.contant = '权益券'
          break;
        case 'welfare':
          title = '福利金明细'
          this.contant = '福利金'
          break;
        case 'public_welfare':
          title = '公益金明细'
          this.contant = '公益金'
          break;
        case 'education':
          title = '教育金明细'
          this.contant = '教育金'
          break;
        case 'card_credit':
          title = '打卡积分明细'
          this.contant = '每日打卡'
          break;
		case 'mineral':
		  title = '矿石明细'
		  this.contant = '矿石'
		  break;
	    case 'baht':
		    title = '矿铢明细'
		    this.contant = '矿铢'
		    break;
		case 'ai':
			title = '提炼明细'
			this.contant = '提炼'
			break;
		case 'baht':
			title = '能耗明细'
			this.contant = '能耗'
			break;
		case 'ai_day':
			title = '今日提炼明细'
			this.contant = '今日提炼'
			break;
		case 'chen_day':
			title = '今日能耗明细'
			this.contant = '今日能耗'
			break;
        default:
          break;
      }
      // uni.setNavigationBarTitle({
      //   title 矿铢明细接口type传值：baht、提炼明细接口type传值：ai、能耗明细接口type传值：chen
      // })
      this.title = title;
	  uni.showLoading()
	  this.$GetOpenid().then(res=>{
		  this.openid = res
		  this.getData()
	  })
    },
    onReachBottom() {
		uni.showLoading()
      this.page += 1
      this.getData()
    },
    methods: {
      getData() {
		uni.request({
			url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.get_zc_list&app=1',
			method: 'POST',
			data: {
				'openid': this.openid,
				page: this.page,
				type: this.type
			},
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			success: res => {
				// console.log(res)
				uni.hideLoading()
				if (res.data.error == 0) {
				  this.list.push(...res.data.list)
				  this.total = res.data.total
				}
			},
			fail: () => {},
			complete: () => {}
		});
      },
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f2f5fa;
  }

  .order {
    width: 100%;
    height: 100vh;
    ;
    box-sizing: border-box;
    .list_box {
      border-radius: 10rpx;
      background-color: #EFEFEF;
    }
  }

  .status {
    width: 100%;
    font-size: 24upx;
    background: #e0e0e0;
    text-align: center;
    color: #fff;
    margin-top: 21upx;
  }

  .title_box {
    height: 300rpx;
    font-size: 32rpx;
    color: #000;
    background-color: #EFEFEF;
    border-radius: 10rpx;
  }

  .items {
    padding: 30rpx 0;
    margin-bottom: 20rpx;
    border: 1px solid #E7E7E7;
    border-radius: 10rpx;
    background-color: #FFFFFF;

    >view {
      width: 33.3%;
      text-align: center;
      line-height: 50rpx;
    }
  }

  .items:nth-of-type(2n) {
    background-color: #D2D5EC;
    border: none;
  }

  .items2 {
    padding: 30rpx 0;
    border-radius: 10rpx;
    background-color: #FFFFFF;
    color: #30549C;

    >view {
      width: 33.3%;
      text-align: center;
    }
  }

  .items3 {
    >view {
      width: 50% !important;
      text-align: center;
    }
  }


  .container {
    padding: 0 30rpx;
    margin-top: -220rpx;
  }
</style>
